<template>
  <div class="posre pt196 borderbox ">
    <div class="posab top0 w100p zindex-1 h241 bgfff"  @click="tap_all">
      <img src="http://one-stand.oss-cn-shanghai.aliyuncs.com/product-index/20190418160834.png" alt=" " class="w100p h211">
    </div>
    <div class="mt-15">
      <!--title begin-->
      <div class="fs18 cfff disflex pl15 pr16 row-reverse">
        <img :src="company_msg.admin_logo" alt="" class="w60 h60 bradius5 ml10 bgfff">
        <div class="row-reverse">
          <b class="fbold">{{company_msg.company_name}}</b>
        </div>
      </div>
      <!--title end-->

      <!--lists begin-->
      <template v-if="dynamic_lists.length">
        <div v-for="(dynamic_item , k1) in dynamic_lists" :key="k1">
          <DynamicItem :dynamic_item="dynamic_item"
                       @operate_tap="operate_tap"
                       @addComment="addComment"
                       @zan="zan"
                       @getMoreComment="getMoreComment"
                       :index1="k1"></DynamicItem>
        </div>
        <div class="textc lh42 fs12 ca8 bgf5f6" v-if="nodata">- 到底了，看看其他的吧 -</div>
      </template>
      <div v-else>
        <NoData>暂无数据</NoData>
      </div>

      <!--lists end-->
    </div>


    <!--评论输入框-->
    <div class="fix_bottom bgfff edit_input trans2" :class="input_show ? '' : 'hide' "><!--:class="input_show ? '' : 'hide' "-->
      <div class="bgfff pt3 pb5 pl10 disflex jsbet pr11 borderbox align-cen">
        <input
          fixed=true
          class=" borderbox lh30 pr11 bgf5f6 bradius5 flex1 mr11 comment_input ca8 fs12 pl15"
          :focus="comment_focus"
          :placeholder="replayComment.commentId ? '回复 '+replayComment.userName +'：': '评论' "
          cursor-spacing="4"
          @focus="inputgetFocus(this,$event)"
          @confirm="inputConfirm"
          :style="{height:text_height+'px'}"
          v-model="comments"/>
        <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/user/smile.png" alt="" class="w25 h25" @click="smile_tap">
        <span class="bgblue cfff w50 textc lh30 fs16 bradius5 disblock ml10" @click="inputConfirm">发送</span>
      </div>

      <!--表情-->
      <div class="trans2"  tabindex="0" :class="emoji_show ? 'h195' : 'h0'">
        <!-- :class="emoji_show ? 'h195' : 'h0'" -->
        <!--:style="{height:emoji_show ? keyboard_height: 0}"-->
        <swiper class="swiper-inner h100p" :indicator-dots="true"
                :circular="true" >
          <div >
            <swiper-item class="bgf5f6 disflex align-cen">
              <div class="disflex wrap jsbet bgf4 pl21 pr21 emoji pt15" >
                <img :src="'http://soupu.oss-cn-shanghai.aliyuncs.com/emoji/'+e.emoji+'.png'"
                     alt="" v-for="(e,k) in emojis"
                     :key="k"
                     class="w25 h25 mr13 mb15 mt5 ml13"
                     @click.stop="emoji_tap(e.char,e.emoji)"
                     v-if="k < 24">
              </div>
            </swiper-item>
          </div>
          <div >
            <swiper-item class="bgf5f6  disflex align-cen">
              <div class="disflex wrap jsbet bgf4 pl10 pr10 emoji pt15" >
                <img :src="'http://soupu.oss-cn-shanghai.aliyuncs.com/emoji/'+e.emoji+'.png'"
                     alt="" v-for="(e,k) in emojis"
                     :key="k" class="w25 h25 mr13 mb15 mt5 ml13"
                     @click.stop="emoji_tap(e.char,e.emoji)"
                     v-if="k < 48 && k >= 23">
              </div>
            </swiper-item>
          </div>
          <div >
            <swiper-item class="bgf5f6  disflex align-cen">
              <div class="disflex wrap jsbet bgf4 pl10 pr10 emoji pt15" >
                <img :src="'http://soupu.oss-cn-shanghai.aliyuncs.com/emoji/'+e.emoji+'.png'"
                     alt="" v-for="(e,k) in emojis"
                     :key="k"
                     @click.stop="emoji_tap(e.char,e.emoji)"
                     class="w25 h25 mr13 mb15 mt5 ml13"
                     v-if="k < 72 && k >= 48">
              </div>
            </swiper-item>
          </div>
        </swiper>


      </div>
    </div>


  </div>
</template>

<script>
  import DynamicItem from '@/components/dynamicItem' // 订单项
  import NoData from '@/components/noData'
  import { mapGetters } from 'vuex';
  import Img from './../../../static/images/about.jpg'

  import WXAJAX from '../../utils/request'
  import util from '../../utils/index'

  let httpImg = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551961574244&di=8729881910dc1f229760af2da633dad5&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201401%2F22%2F20140122194030_JBjii.jpeg';

  export default {
    name: '',
    components: {DynamicItem, NoData},
    data() {
      return {
        prevImg:[httpImg,httpImg,httpImg],
        dynamic_operate_show: false,
        dynamic_lists: [],
        emojiArray: [['😠', '😩', '😲', '😞', '😵', '😰', '😒', '😍',
          '😤', '😜', '😝', '😋', '😘', '😚', '😷', '😳',
          '😃', '😅', '😆', '😁', '😂', '😊', '☺', '😄',
          '😢', '😭', '😨', '😣', '😡', '😡', '😖', '😔', ],
          ['😱', '😪', '😏', '😓', '😥', '😫', '😉']],
        emoji_show:false,
        comment_focus:false ,
        comments:'',
        input_show:false ,
        add_comments_index:0,//当前点击的哪条动态
        text_height:30,
        emojiChar: "☺-😋-😌-😍-😏-😜-😝-😞-😔-😪-😭-😁-😂-😃-😅-😆-👿-😒-😓-😔-😏-😖-😘-😚-😒-😡-😢-😣-😤-😢-😨-😳-😵-😷-😸-😻-😼-😽-😾-😿-🙊-🙋-🙏-✈-🚇-🚃-🚌-🍄-🍅-🍆-🍇-🍈-🍉-🍑-🍒-🍓-🐔-🐶-🐷-👦-👧-👱-👩-👰-👨-👲-👳-💃-💄-💅-💆-💇-🌹-💑-💓-💘-🚲",
        emoji: [
          "60a", "60b", "60c", "60d", "60f",
          "61b", "61d", "61e", "61f",
          "62a", "62c", "62e",
          "602", "603", "605", "606", "608",
          "612", "613", "614", "615", "616", "618", "619", "620", "621", "623", "624", "625", "627", "629", "633", "635", "637",
          "63a", "63b", "63c", "63d", "63e", "63f",
          "64a", "64b", "64f", "681",
          "68a", "68b", "68c",
          "344", "345", "346", "347", "348", "349", "351", "352", "353",
          "414", "415", "416",
          "466", "467", "468", "469", "470", "471", "472", "473",
          "483", "484", "485", "486", "487", "490", "491", "493", "498", "6b4"
        ],
        emojis: [], //qq、微信原始表情
        keyboard_height:0,
        COMPANYID : 0 ,
        CARDID: '0',
        company_msg:{
          admin_logo:'',
          company_logo:'',
          company_name:''
        },
        page:1,
        isLoading : false ,//是否在加载
        nodata:false ,//是否已经没有数据
        replayComment: {}, // 回复信息对象
      }
    },
    onHide(){
      this.clearPage();
    },
    onLoad(){

    },
    onShow() {
      let v = this ;
      //获取当前的公司
      let lastCardId =  v.CARDID;
      v.COMPANYID = wx.getStorageSync('COMPANYID') || 0 ;
      v.CARDID = wx.getStorageSync('CARDID') || 0 ;

      if (lastCardId != v.CARDID || !v.CARDID) {
        this.page = 1;
        v.getcompany();
        v.inits();
      }
    },
    onPageScroll:function(e){
      this.comment_focus = false ;
      this.input_show = false ;
    },
    watch:{
      /*  comment_focus(newVal,oldVal){
            console.log(newVal);
        }*/
    },
    mounted(){
    },
    methods: {
      getMoreComment(comments, idx){
        this.dynamic_lists[idx].commentModelList.push(...comments);
        this.$set(this, 'dynamic_lists', JSON.parse(JSON.stringify(this.dynamic_lists)));
      },
      getcompany(){//获取公司信息
        let v = this ;
        var em = {},
          emChar = v.emojiChar.split("-");
        var emojis = [];
        v.dynamic_lists = [] ;
        v.emoji.forEach(function(v, i) {
          em = {
            char: emChar[i],
            emoji: "0x1f" + v
          };
          emojis.push(em)
        });
        v.emojis = emojis ;

        WXAJAX.POST({
          companyId  : v.COMPANYID,
        }, '', '/goods/getCompanyInfo').then((data, code) => {
          if(data){
            v.company_msg = {
              admin_logo:data.companyLogo || '',
              company_logo:data.companyLogo || '',
              company_name:data.companyName || '',
            }
          } else if (code != 209){
            v.company_msg = {}
          }
        }).catch((err) => {
          v.company_msg = {};
        })
      },
      inits(refresh = ''){//动态
        let v = this ;
        if(v.isLoading){
          wx.hideLoading();
          return
        }
        v.isLoading = true ;
        wx.showLoading();
        WXAJAX.POST({
          companyId  : v.COMPANYID,
          pageNum: v.page ,
          refresh,
          cardId: this.currentCompany.cardId || v.CARDID || 0,
        }, '', '/personal/getDynamicInfo').then((data, code) => {
          if(data){
            let nowTime = + new Date(),
              addTime = '' ,
              diff = 0 ;
            data.forEach(function (i,k) {
              i.photos = i.photos ? i.photos.split(',') : [];
              i.createTime = util.getdate(i.createTime,'dateTime');
              i.doThumbsName = i.doThumbsName ? i.doThumbsName.split(',') : [];
              /*addTime = +new Date(i.createTime);
              diff = nowTime - addTime ;
              if( diff < 60*60*1000){
                  console.log('超出一小时');
                  i.createTime = diff / 1000 / 60 ;
                  i.createTime = i.createTime +'分钟前' ;
              }*/
            });
            v.dynamic_lists = [...v.dynamic_lists , ...data] ;
            v.page ++ ;
            setTimeout(function () {
              v.isLoading = false ;
            },500);
          }else if (code == 209){
            setTimeout(function () {
              v.isLoading = false ;
            },500);
          } else {
            setTimeout(function () {
              v.nodata = true ;
              v.isLoading = false ;
            },500);
          }
          wx.hideLoading();
        }).catch((err) => {
          console.log(err) ;
          wx.hideLoading();
          if(err.code == 204){
            v.nodata = true ;
          }
          setTimeout(function () {
            v.isLoading = false ;
          },500);
        })
      },
      operate_tap(index) {//显示点赞或者评论
        let status = !this.dynamic_lists[index].operate_show;
        this.$set(this.dynamic_lists[index], 'operate_show', status);
      },
      addComment(index1, replayComment) {//添加评论
        if((replayComment.userName&&!replayComment.commentId) || (replayComment.commentId && replayComment.userId == wx.getStorageSync('userId'))) {
          return;
        }

        this.input_show = true ;
        this.replayComment = replayComment;
        // this.comment_focus = true ;
        this.add_comments_index = index1 ;
        let v = this ;
        setTimeout(function () {
          v.$set(v.dynamic_lists[index1] , 'operate_show' , false );
          v.comment_focus = true ;
        },200)
      },
      smile_tap(){//显示关闭emoji
        if (!this.emoji_show) {
          this.emoji_show = true;
          this.comment_focus = false;
          // this.height_class = 'h195'
        } else {
          this.comment_focus = false;
        }
      },
      inputgetFocus(that,e){//input框focus时
        let v = this ;
        /*
                        if(v.keyboard_height == 0) {
                            wx.getSystemInfo({
                                success(res) {
                                    let tabbar = res.screenHeight - res.windowHeight ;
                                    v.keyboard_height = e.target.height - tabbar + 'px';
                                }
                            });
                        }*/
        /*   v.comment_focus = false ;
           setTimeout(function () {
               v.comment_focus = true ;
           },100)*/
        /*   this.emoji_show = false ;
       let v= this ;
       console.log('commentFocus')
       v.comment_focus = false ;
       setTimeout(function () {
           // v.comment_focus = true ;
       },100)*/
      },
      emoji_tap(char){//点击表情时
        this.comments = this.comments + char;
      },
      emoji_del(){
        console.log('del');
        this.comments.substr(0,this.comments.length-1);
        console.log(this.comments)
      },
      tap_all(){
        this.input_show = false ;
        this.comment_focus = false ;
        this.$set(this.dynamic_lists[this.add_comments_index] , 'operate_show' , false )
      },
      clearPage(){//页面还原
        console.log('clearpage');
        this.input_show = false ;
        this.comment_focus = false ;
        this.comments = '' ;
        this.$set(this.dynamic_lists[this.add_comments_index] , 'operate_show' , false )
      },
      inputConfirm(){//输入完成
        this.emoji_show = false ;
        this.comment_focus = false ;

        WXAJAX.POST({
          dynamicId: this.dynamic_lists[this.add_comments_index].dynamicId,
          parentId: this.replayComment.commentId || 0,
          cardId: this.currentCompany.cardId || this.CARDID || 0,
          text: this.comments,
        }, '', '/personal/doComment')
          .then(res=>{
            let comments = this.dynamic_lists[this.add_comments_index];
            comments.commentModelList = comments.commentModelList ? comments.commentModelList : [];
            if(comments.commentModelList.length<10 || comments.commentNum>comments.commentModelList.length){
              this.dynamic_lists[this.add_comments_index].commentModelList.push({
                text: this.comments,
                replyName: this.replayComment.userName || '',
                userName: wx.getStorageSync('USERNAME'),
              });
              this.$set(this, 'dynamic_lists', JSON.parse(JSON.stringify(this.dynamic_lists)));
            }
            this.input_show = false;
            this.comments = '' ;
          });
      },
      zan(index1,isThumbs ,dynamicId){//点赞
        let v = this ;
        wx.showLoading() ;
        WXAJAX.POST({
          dynamicId  : dynamicId,
          cardId: wx.getStorageSync('CARDID')
        }, '', '/personal/doDynamicThumbs').then((data) => {
          wx.hideLoading() ;
          if(data){//点赞
            v.dynamic_lists[index1].doThumbsName.push(data);//添加人名
            v.$set(v.dynamic_lists[index1],'isThumbs' , 1 );
            v.$set(v.dynamic_lists[index1],'doThumbsNum' , ++v.dynamic_lists[index1].doThumbsNum );
          }else {
            v.dynamic_lists[index1].doThumbsName.pop();
            v.$set(v.dynamic_lists[index1],'isThumbs' , 0 );
            v.$set(v.dynamic_lists[index1],'doThumbsNum' , --v.dynamic_lists[index1].doThumbsNum );
          }
          let status = !v.dynamic_lists[index1].operate_show;
          v.$set(v.dynamic_lists[index1], 'operate_show', status);

        }).catch((err) => {
          console.log(err);
          wx.hideLoading() ;
        })
      }
    },
    computed:{
      ...mapGetters(['currentCompany']),
    },
    onReachBottom() {
      let v = this ;
      v.inits();
    },
    onShareAppMessage(e){
      const { dynamicid } = e.target.dataset;
      this.addDynamicForwardRecord(this.CARDID, dynamicid);

      return {
        path :`/pages/dynamicDetail/main?dynamicId=${dynamicid}&companyId=${this.COMPANYID}&cardId=${this.CARDID}&goType=1`,
        success(e){
          wx.showShareMenu({
            withShareTicket : true
          })
        },
        fail(e){
          console.log('失败-- ',e);
        }
      }
    },
    async onPullDownRefresh() {
      // to doing..
      // 停止下拉刷新
      wx.showNavigationBarLoading();
      this.page = 1 ;
      this.dynamic_lists = [] ;
      this.nodata = false ;
      this.isLoading = false ;
      this.inits();
      wx.stopPullDownRefresh();
      setTimeout(function () {
        wx.hideNavigationBarLoading();
      },300)
    },
  }
</script>

<style>
  page{
    background: white;
  }
  .edit_input.hide{
    height: 0;
  }
</style>

























